<template>
  <div class="cart">
    <van-swipe-cell v-for="item in cart" :key="item.id">
      <van-checkbox
        :value="item.isChecked"
        @click="changeCheckedStatus({ id: item.id })"
      />
      <van-card
        :price="item.price && item.price.toFixed(2)"
        :title="item.title"
        :thumb="item.image"
        desc=""
        class="goods-card"
      >
        <template #num>
          <van-stepper
            theme="round"
            button-size="22"
            :default-value="item.amount"
            :integer="true"
            min="1"
            max="999"
            @change="modifyCartNum({ num: $event, id: item.id })"
          />
        </template>
      </van-card>
      <template #right>
        <van-button
          square
          text="删除"
          type="danger"
          class="delete-button"
          @click="removeFromCart({ id: item.id })"
        />
      </template>
    </van-swipe-cell>
    <van-submit-bar
      :price="totalPrice"
      button-color="#31a5fc"
      button-text="提交订单"
      @submit="linkToOrderConfirm"
    >
      <div class="check-options">
        <van-checkbox
          v-model="checked"
          @click="checkAll({ checked })"
          icon-size="14px"
          >全选</van-checkbox
        >
        <span class="van-checkbox__label delete-checked" @click="deleteChecked"
          >删除选中项</span
        >
      </div>
    </van-submit-bar>
  </div>
</template>

<script>
import Vue from "vue";
import {
  SwipeCell,
  Card,
  Button,
  Stepper,
  Checkbox,
  SubmitBar,
  Toast
} from "vant";

Vue.use(SwipeCell);
Vue.use(Card);
Vue.use(Button);
Vue.use(Stepper);
Vue.use(Checkbox);
Vue.use(SubmitBar);
Vue.use(Toast);
//引入vuex
import { mapGetters, mapMutations, mapState } from "vuex";
export default {
  name: "Cart",
  data() {
    return {
      list: [],
      checked: false
    };
  },
  created() {
    this.checked = this.isAllChecked;
  },
  computed: {
    ...mapState(["cart"]),
    ...mapGetters(["totalPrice", "isAllChecked"])
  },
  methods: {
    ...mapMutations([
      "removeFromCart",
      "checkAll",
      "changeCheckedStatus",
      "modifyCartNum",
      "deleteChecked"
    ]),
    linkToOrderConfirm() {
      this.$store.state.orderList = this.$store.state.cart.filter(
        item => item.isChecked
      );
      const bool = this.$store.state.cart.some(item => item.isChecked);
      if (bool) {
        this.$router.push("/order-confirm");
      } else {
        Toast("请选择至少一件商品");
      }
    }
  },
  watch: {
    isAllChecked(val) {
      this.checked = val;
    }
  }
};
</script>

<style lang="scss">
.van-swipe-cell__wrapper {
  display: flex;
}
.van-checkbox__label {
  font-size: 12px;
  margin-left: 10px;
}
</style>
<style lang="scss" scoped>
.cart {
  height: 100%;
  overflow: auto;
}
.check-options {
  padding: 5px 0;
  overflow: hidden;
}
.van-submit-bar__bar {
  padding: 0;
}
.goods-card {
  margin: 0;
  background-color: #fff;
}
.van-card {
  flex: 1;
  padding-left: 0;
}
.van-checkbox {
  padding: 0 8px;
}
.delete-checked {
  text-decoration: underline;
  display: inline-block;
  margin-top: 5px;
}
.van-card__price {
  color: #fa585a;
  font-weight: 700;
}
.delete-button {
  height: 100%;
}
.van-submit-bar__bar {
  padding: 0;
}
.van-submit-bar__text {
  max-width: 48%;
  overflow: hidden;
}
</style>
